<template>
	<div class="page">
		<div class="headerTop">
			模板名称:
			<el-input type="text" v-model="search_commodity" placeholder="请输入查询关键字" class="inp"></el-input>
			<el-button type="primary" size="small" @click="searchGoods">查询</el-button>
		</div>
		<div class="header_bottom">
			<!-- <el-button type="success" @click="add('v1')" size="small">添加V1模板</el-button> -->
			<el-button type="success" @click="add('v5')" size="small">添加模板</el-button>
			<el-button type="primary" @click="showAll" size="small" v-if="all">刷新全部</el-button>
			<!--<el-button type="danger" size="small"  @click="deleteGoods">删除</el-button>-->
		</div>
		<div class="container_table">
			<el-table :data="tabledata" size="mini" border style="width: 99.4%;" :header-cell-style="{
				'background-color': tableHead,
				'color': 'white',
				'fontSize': '0.3rem',
				'height': '0.6rem',
				'line-height': '0.6rem',
				'padding': '0.1rem'
			}" :cell-style="{ 'fontSize': '0.3rem' }">
				<!-- <el-table-column type="selection" min-width="30">
				</el-table-column> -->
				<el-table-column label="ID" prop="id" align="center" min-width="60">
				</el-table-column>
				<el-table-column prop="template_name" label="模板名称" align="center" min-width="100">
				</el-table-column>
				<!-- <el-table-column label="版本" align="center" min-width="80">
					<template slot-scope="scope">
						<span>{{scope.row.version==2?'V5':'V1'}}</span>
					</template>
</el-table-column> -->
				<el-table-column prop="remark" label="备注" align="center" min-width="300">
				</el-table-column>
				<el-table-column prop="add_time" label="添加时间" align="center" min-width="120">
				</el-table-column>
				<el-table-column label="操作" min-width="140" align="center">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="modifyform(scope.row)">编辑</el-button>
						<el-button @click="copyTemplate(scope.row)" type="primary" size="mini">复制</el-button>
						<el-button @click="sureDelete(scope.row)" type="danger" size="mini">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="current_change"
					:current-page="queryParams.pageNo" :page-size="queryParams.pageSize" :page-sizes="[10, 15, 20]"
					layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total">
				</el-pagination>
			</div>
		</div>
		<el-dialog :visible="dialogFormVisible" width="30%" append-to-body :show-close="close">
			<div class="toptit">
				<span>复制模板 | {{ copyForm.template_name }}</span>
				<span style="float:right;cursor: pointer;" @click="dialogFormVisible = false">关闭</span>
			</div>
			<el-form :model="copyForm" style="text-align:left;margin-top:0.2rem;" block>
				<el-form-item class="formline" label="新名称:">
					<el-input class="inpu" v-model="copyForm.new_name" placeholder="请输入复制后的名称,必填"></el-input>
				</el-form-item>
				<el-form-item class="formline" label="备　注:">
					<el-input class="inpu" v-model="copyForm.remark" type="textarea" :row="3" placeholder="请输入备注,可选">
					</el-input>
				</el-form-item>
			</el-form>
			<div style="text-align:right;">
				<el-button type="success" size="small" @click="sureCopy">确 定</el-button>
				<el-button type="primary" size="small" @click="dialogFormVisible = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'mould',
	data() {
		return {
			all: false,
			close: false,
			dialogFormVisible: false,
			copyForm: {
				id: 0,
				template_name: '',
				new_name: '',
				new_remark: '',
				remark: ''
			},
			search_commodity: '', //输入框内容
			queryParams: {
				pageNo: 1,
				pageSize: 10,
				total: 0
			},
			tableHead: localStorage.getItem("bgcolor"),
			tabledata: []
		}
	},

	created() {
		this.search_commodity = localStorage.getItem("mouldKey") || '';
		this.queryParams.pageNo = Number(localStorage.getItem("currentMouldNo")) || 1;
		this.showList(this.queryParams.pageNo, this.queryParams.pageSize, this.search_commodity);
	},

	beforeRouteLeave(to, from, next) {
		// 可以访问组件实例 `this`
		//console.log(to.name);
		if (['addMould', 'addMouldOld', 'editMould', 'editMouldOld'].indexOf(to.name) < 0) {
			localStorage.removeItem('currentMouldNo');
			localStorage.removeItem('mouldKey');
		} else {
			localStorage.setItem("currentMouldNo", this.queryParams.pageNo);
			localStorage.setItem("mouldKey", this.search_commodity);
		}
		next();
	},

	methods: {
		current_change: function (currentPage) {
			this.queryParams.pageNo = currentPage;
			this.showList(currentPage, this.queryParams.pageSize, this.search_commodity);
		},
		handleSizeChange(val) {
			this.queryParams.pageSize = val;
			this.showList(this.queryParams.pageNo, val, this.search_commodity);
		},

		//获取数据函数
		showList: function (num, size, keyword) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/template/lists',
				data: {
					'limit': size,
					'page': num,
					'keyword': keyword
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					that.tabledata = res.data.data;
					this.queryParams.total = res.data.count;
				}
			}).catch(error => {
				console.log(error);
				this.tabledata = [];
				this.queryParams.total = 0;
				this.queryParams.pageNo = 1;
			});
		},
		// 点击搜索输入框里的内容
		searchGoods: function () {
			this.all = true;
			this.queryParams.pageNo = 1;
			this.showList(1, this.queryParams.pageSize, this.search_commodity);
		},
		showAll() {
			this.all = false;
			this.queryParams.pageNo = 1;
			this.search_commodity = '';
			this.showList(1, this.queryParams.pageSize);
		},

		add(v) {
			if (v == 'v5') {
				this.$router.push({
					name: 'addMould',
					path: 'addMould',
					component: 'addMould'
				})
			} else {
				this.$router.push({
					name: 'addMouldOld',
					path: 'addMouldOld',
					component: 'addMouldOld'
				})
			}
			// this.show='add';
		},
		modifyform(row) {
			if (row.version == 2) {
				this.$router.push({
					name: 'editMould',
					path: 'editMould',
					component: 'editMould'
				});
			} else {
				this.$router.push({
					name: 'editMouldOld',
					path: 'editMouldOld',
					component: 'editMouldOld'
				});
			}
			localStorage.setItem("editMouldId", row.id);
		},

		copyTemplate(row) {
			this.dialogFormVisible = true;
			this.copyForm.id = row.id;
			this.copyForm.template_name = row.template_name;
		},
		sureCopy() {
			this.$http({
				method: 'post',
				url: 'api/template/copy',
				data: {
					"id": this.copyForm.id,
					"template_name": this.copyForm.new_name,
					"remark": this.copyForm.remark
				}
			}).then(res => {
				if (res && res.data.result == "success") {

					this.$message({
						message: '恭喜,删除模板成功!',
						type: 'success',
						center: true
					});

					this.showList(this.queryParams.pageNo, this.queryParams.pageSize, '');
				}

			}).catch(error => {
				console.log(error);

			});
			this.dialogFormVisible = false;
		},
		sureDelete(row) {
			this.$confirm('删除后无法恢复, 是否确认删除该模板?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.handleClick(row);
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		handleClick(row) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/template/delete',
				data: {
					"id": row.id
				}
			}).then(res => {
				if (res && res.data.result == "success") {

					this.$message({
						message: '恭喜,删除模板成功!',
						type: 'success',
						center: true
					});
					this.showList(this.queryParams.pageNo, this.queryParams.pageSize, '');
				}

			}).catch(error => {
				console.log(error);

			});

		}
	}
}
</script>

<style scoped>
.inpu,
.inp {
	width: 5.5rem;
}
</style>
